<template>
  <div class="HomeView">
    <div class="search"></div>
    <div class="tool">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="add">新增</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column type="index" label="#" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="sex" label="性别" width="60" align="center"></el-table-column>
        <el-table-column prop="id" label="参赛号" align="center"></el-table-column>
        <el-table-column prop="type" label="比赛项目" align="center"></el-table-column>
        <el-table-column prop="score" label="完赛成绩" align="center"></el-table-column>
        <el-table-column prop="sexIndex" label="性别排名" align="center" width="100"></el-table-column>
        <el-table-column prop="speed" label="平均配速" align="center"></el-table-column>
        <el-table-column prop="allIndex" label="全部选手排名" align="center"></el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增" :visible.sync="dialogFormVisible" width="750px">
      <el-form :model="form" inline label-width="120px">
        <el-form-item label="姓名">
          <el-input size="small" v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="性别" label-width="120px">
          <el-select size="small" v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="参赛号" label-width="120px">
          <el-input size="small" v-model="form.id"></el-input>
        </el-form-item>

        <el-form-item label="比赛项目" label-width="120px">
          <el-select size="small" v-model="form.type" placeholder="请选择比赛项目">
            <el-option label="全马" value="全马"></el-option>
            <el-option label="半马" value="半马"></el-option>
            <el-option label="欢乐跑" value="欢乐跑"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="完赛成绩" label-width="120px">
          <el-input-number
            size="small"
            :precision="2"
            v-model="form.score"
            controls-position="right"
            :min="0"
          ></el-input-number>
        </el-form-item>

        <!-- <el-form-item label="性别排名" label-width="120px">
          <el-input size="small" v-model="form.sexIndex"></el-input>
        </el-form-item>-->

        <el-form-item label="平均配速" label-width="120px">
          <el-input-number
            size="small"
            :precision="2"
            v-model="form.speed"
            controls-position="right"
            :min="0"
          ></el-input-number>
        </el-form-item>

        <!-- <el-form-item label="全部选手排名" label-width="120px">
          <el-input size="small" v-model="form.allIndex"></el-input>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "王小虎",
          sex: "男",
          id: "1234",
          type: "半马",
          score: "30",
          sex: "男",
          sexIndex: "20",
          speed: "8",
          allIndex: "28"
        },
        {
          name: "王小虎1",
          sex: "男",
          id: "124",
          type: "半马",
          score: "30",
          sex: "男",
          sexIndex: "20",
          speed: "8",
          allIndex: "28"
        }
      ],
      dialogFormVisible: false,
      form: {}
    };
  },
  methods: {
    add() {
      this.form = {};
      this.dialogFormVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.HomeView {
  padding: 15px;
  text-align: left;
  .tool {
    padding: 10px 0;
  }

  ::v-deep .el-form-item__content > div {
    width: 200px;
  }
}
</style>
